<template>
  <div>
    <el-dialog :title="titleOptions[form.type]" :visible.sync="dialogVisible" :close-on-click-modal="false" width="750px" @close="close">
      <div v-loading="loading" class="dialog-upload-container" element-loading-text="上传中">
        <!-- 批量导入说明 -->
        <div class="app-main-tips-box">
          <div class="title">
            <i class="el-icon-warning" /> 导入说明：
          </div>
          <ul>
            <li>
              1.先下载EXCEL模板，按照要求填写后上传文档进行导入，
              <a class="btn" @click.prevent="downTemplate">
                <u>点击下载模板</u>
              </a> 。
            </li>
            <li>2.导入文件大小不能超过5M。</li>
          </ul>
        </div>
        <div class="upload-box">
          <el-upload
            ref="upload"
            :action="actionUrl"
            :multiple="false"
            :limit="1"
            :headers="uploadHeaders"
            :on-success="handleExcelSuccess"
            :before-upload="beforeExcelUpload"
            drag
          >
            <i class="el-icon-upload" />
            <div class="el-upload__text">
              将excel文件拖到此处，或
              <em>点击上传</em>
            </div>
          </el-upload>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { marketingPhoneListUrl } from '@/api/upload'

export default {
  data() {
    return {
      // 配置
      titleOptions: {
        phone: '上传手机用户名单',
        bank: '上传银行持卡人名单信息'
      },
      resolve: null,
      reject: null,
      // 状态
      dialogVisible: null,
      loading: false,
      // 数据
      actionUrl: '', // 上传地址
      uploadHeaders: {}, // 请求头
      form: {
        type: 'phone',
        phoneListKey: null
      }
    }
  },
  computed: {
    ...mapGetters(['fileBaseUrl'])
  },
  mounted() {
    this.actionUrl = marketingPhoneListUrl
    this.uploadHeaders = { 'X-BUSINESS-TOKEN': this.$store.state.user.token }
  },
  methods: {
    open(type = 'phone') {
      this.form.type = type
      this.show()
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    show() {
      this.dialogVisible = true
    },

    close() {
      this.form = {
        type: 'phone',
        phoneListKey: null
      }
      this.loading = false
      this.$refs.upload.clearFiles()
    },

    hide() {
      this.resolve = null
      this.reject = null
      this.dialogVisible = false
    },

    // 下载模板
    downTemplate() {
      const alink = document.createElement('a')
      if (this.form.type === 'phone') {
        alink.href = this.fileBaseUrl + '/business/template/phone_list.xlsx'
      }
      if (this.form.type === 'bank') {
        alink.href = this.fileBaseUrl + '/business/template/bank_list.xlsx'
      }
      alink.download = ''
      alink.click()
    },

    beforeExcelUpload(file) {
      if (this.beforeUploadExcel(file, this, 5)) {
        this.loading = true
        return true
      } else {
        return false
      }
    },

    // excel 上传
    handleExcelSuccess(res, file) {
      this.loading = false
      if (res.code === 0) {
        this.$notify({
          title: '成功',
          message: '上传成功',
          type: 'success',
          duration: 2000,
          offset: 40
        })
        this.resolve && this.resolve(res.data.key)
        this.hide()
      } else {
        this.loading = false
        this.$refs.upload.clearFiles()
        this.$message.error(res.msg)
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.dialog-upload-container {
  padding-bottom: 20px;
  .upload-box {
    ::v-deep{
      .el-upload {
        width: 100%;
        margin-top: 20px;

        .el-upload-dragger {
          width: 100%;
        }
      }
    }
  }
}
</style>
